<!-- pages/components/textarea/textarea.vue -->
<template>
    <view class="wrapper">
        <view class="title">1. 基础用法</view>
        <textarea class="my-textarea" v-model="text1" placeholder="请输入多行文本..." />
        
        <view class="title">2. 自动增高 (auto-height)</view>
        <textarea class="my-textarea" v-model="text2" auto-height placeholder="内容增多时会自动增高..." />
    </view>
</template>

<script setup>
import { ref } from 'vue';

const text1 = ref('');
const text2 = ref('');
</script>

<style>
.wrapper {
    padding: 15px;
}
.title {
    font-size: 16px;
    font-weight: bold;
    padding: 10px 0;
    margin-top: 10px;
}
.my-textarea {
    width: 100%;
    min-height: 80px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #fff;
    box-sizing: border-box; /* 关键：让padding不撑开宽度 */
}
</style>